<template v-title data-title="课程列表">
    <div>
        <HeadContainer></HeadContainer>

        <!-- 面包削 -->
        <div class="mianbaoxiao clearfix">
            <div class="mianbao-min"><a href="#">首页</a> / 全部课程</div>
        </div>
        <!-- 面包削End -->
        <!-- 课程分类 -->
        <div class="peixun-kecheng clearfix" style="display:block">
            <div class="kecheng-fl-pc">
                <a href="#" v-for="subject in subjects">{{subject.title}}</a>
            </div>
        </div>
        <!-- 课程分类 End -->
        <div class="figures_list container">
            <!-- 课程列表 -->
            <div class="m-header-video">
                <ul class="content_list listqu clearfix">
                    <li class="content_item" v-for="courseVo in courseList">
                        <a @click="toCourseDetail(courseVo.id)" class="link" :title="courseVo.title" target="_blank">
                            <img :src="courseVo.cover">
                            <em class="jishu">{{courseVo.videoCount}}集全</em>
                            <div class="main_title">{{courseVo.title}}</div>
                            <p class="price" style="display:none">￥0.01</p>
                            <div class="sub_title">{{courseVo.buyCount}}次学习</div>
                        </a>
                    </li>
                </ul>
            </div>
            <!-- 课程列表 End -->
        </div>
        <FooterContainer></FooterContainer>
    </div>
</template>

<script>

    import course from "@/api/course";
    import HeadContainer from '@/views/HeadContainer'
    import FooterContainer from '@/views/FooterContainer'
    import subject from "@/api/subject";

    export default {
        name: "CourseList",
        components: {HeadContainer, FooterContainer},
        data() {
            return {
                courseList: [],
                currentPage: 1,
                pageSize: 4,
                total: 0,
                subjects:[]
            }
        },
        methods: {

            //跳转到详情页面
            toCourseDetail(id){
                this.$router.push({path:"/courseDetail/" + id})
            },

            initData() {
                course.findAllCourse(this.currentPage, this.pageSize).then(resp => {
                    this.courseList = resp.data.data;
                    this.total = resp.data.total;
                });
            },
            initSubject() {
                subject.findSubjects().then(resp => {
                    this.subjects = resp.data;
                });
            }

        },
        created() {
            this.initData();
            this.initSubject();
        }

    }
</script>
<style src="@/assets/css/v2_index.css" scoped></style>